<template>
  <div class="box">
    <MyDay9Vue :list="list" @gentle="gentle"> </MyDay9Vue>
    <MyDay9Status :list="list"> </MyDay9Status>
  </div>
</template>

<script>
import MyDay9Vue from '@/components/my-day9-vue.vue'
import MyDay9Status from '@/components/my-day9status.vue'
export default {
  components: {
    MyDay9Vue,
    MyDay9Status,
  },
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.list = Array(10)
      .fill('')
      .map((item, index) => ({
        num1: Math.floor(Math.random() * 10),
        num2: Math.floor(Math.random() * 10),
        result: '',
        status: '未完成',
        id: index + 1,
        flag: false,
      }))
  },
  methods: {
    gentle(i) {
      // console.log(i, this.list[i].result)
      console.log(typeof this.list[i].result)
      if (this.list[i].result === this.list[i].num1 + this.list[i].num2) {
        this.list[i].status = '正确'
      } else {
        this.list[i].status = '错误'
      }
      this.list[i].flag = true
    },
  },
  v,
}
</script>

<style scoped>
.box {
  width: 800px;
  margin: 0 auto;
}
</style>
